import React, { useState } from 'react';
import { Table, Carousel, Descriptions, Divider, Timeline, Tag } from 'antd';
import styles from './Custom.less';
import config from '../../../config/config';

const DescriptionsItem = Descriptions.Item;
const TimeLineItem = Timeline.Item;

const DetailPage = () => {

    const iconStyle = {
        verticalAlign: "bottom",
        fontSize: "16px",
    };

    const iconTitleStyle = {
        marginRight: "6px",
        paddingTop: "3px"
    };

    const ragColumns = [
        { title: "RAG检索", dataIndex: "name", key: "name", width: "10%", align: "center" },
        { title: "RAG模式", dataIndex: "desc", key: "desc", width: "90%" }
    ];
    const ragItems = [
        { index: "1", name: "文档检索", desc: "NativeRAG(原生RAG)、MultiQuery(多问题)、RAGFusion(检索融合)、SubQuestion(子问题)、HYDE(假设提问)、RoutingLogic(逻辑路由)、RoutingSemantic(语义路由)、MultiQueryConstruction(查询重构)、MultiRepresentation(多重表示)、RAPTOR(层级索引)" },
        { index: "2", name: "智能检索", desc: "Corrective(纠错型)、SelfCheck(反思型)、Adaptive(自适应型)" },
        { index: "3", name: "特殊减速", desc: "GraphRAG(知识图谱)、KeyWord(关键字BM25)、HybridRAG(混合检索)、KMean(K均值聚类)、RerankRAG(重排序)" },
    ];

    const agentColumns = [
        { title: "AI Agent", dataIndex: "name", key: "name", width: "10%", align: "center" },
        { title: "Agent模式", dataIndex: "desc", key: "desc", width: "90%" }
    ];
    const agentItems = [
        { id: "1", name: "AI Agent", desc: "ReAct(推理行动)、ReWOO(无观察推理)、PlanExecute(规划执行)、LLMCompile(LLM编译)、Reflection(反思型)、SelfDiscover(自发现)、Reflexion(反射型)、LATS(智能树搜索)" },
        { id: "2", name: "智能问答", desc: "Supervisor(监督型)、Collaboration(协作型)、Hierarchical(层级型)" },
    ];

    const describeColumns = [
        { title: "名称", dataIndex: "name", key: "name", width: "12%", align: "center" },
        { title: "项目名", dataIndex: "projectName", key: "projectName", width: "15%", align: "center" },
        { title: "说明", dataIndex: "describe", key: "describe", width: "75%" }
    ];
    const descriptionList = [
        { id: "1", name: "前端框架", projectName: "taixu-system-web", describe: "提供首页、大模型、RAG、Agent及自定义智能体等页面，使用 React 构建响应式用户界面，结合 Umi（蚂蚁集团开源的企业级前端应用框架）进行工程化管理，并依托 Ant Design 组件库提供一致、美观、高效的交互体验。" },
        { id: "2", name: "前端业务", projectName: "taixu-system-service", describe: "系统基础业务功能及RAG和Agent代码实现，采用 Python 作为核心开发语言，基于轻量高效且灵活的 Flask Web 框架构建 RESTful API 服务" },
    ];

    const timeLineItems = [
        { id: "5", icon: "ri-stack-line", color: "red", desc: "V0.0.4 2025-10-12 RAG与Agent功能代码更新" },
        { id: "4", icon: "ri-global-line", color: "orange", desc: "V0.0.3 2025-08-20 集成Docker部署" },
        { id: "3", icon: "ri-stack-line", color: "purple", desc: "V0.0.2 2025-06-02 实现与大模型的流式聊天功能" },
        { id: "2", icon: "ri-stack-line", color: "blue", desc: "V0.0.1 2025-03-15 更新前端布局、菜单等" },
        { id: "1", icon: "ri-global-line", color: "green", desc: "V0.0.0 2025-02-24 搭建项目前后端，React + Umi和Python + Flask" }
    ];

    const linkUrlItems = [
        { id: 0, desc: "Python", className: styles.carsouselOne, url: "https://www.python.org/" },
        { id: 1, desc: "LangChain", className: styles.carsouselTwo, url: "https://www.langchain.com" },
        { id: 2, desc: "Streamlit", className: styles.carsouselThree, url: "https://streamlit.io" },
        { id: 0, desc: "ModelScope", className: styles.carsouselFour, url: "https://modelscope.cn/" },
        { id: 1, desc: "Ollama", className: styles.carsouselFive, url: "https://ollama.com" },
        { id: 2, desc: "OpenAI", className: styles.carsouselSix, url: "https://platform.openai.com/docs/models" },
    ];

    const webItems = [
        { id: "1", name: "前端技术栈", url: "https://github.com/facebook/react", desc: "React" },
        { id: "2", name: "前端框架", url: "https://umijs.org/", desc: "Umi" },
        { id: "3", name: "数据流框架", url: "https://dvajs.com/guide/", desc: "Dva" },
        { id: "4", name: "前端UI库", url: "https://ant.design/index-cn", desc: "Ant Design" },
        { id: "5", name: "图表库", url: "https://ant-design-charts-next.antgroup.com/manual/introduction", desc: "Ant Design Charts" },
        { id: "6", name: "图标库", url: "https://remixicon.com/", desc: "Remix Icon" },
        { id: "7", name: "地图组件", url: "https://github.com/ElemeFE/react-amap", desc: "React-amap" },
        { id: "8", name: "富文本编辑器", url: "https://braft.margox.cn/", desc: "Braft-editor" },
        { id: "9", name: "HTTP库", url: "http://www.axios-js.com/", desc: "Axios" },
        { id: "10", name: "拾色器", url: "http://casesandberg.github.io/react-color/", desc: "React-color" }
    ];

    const serviceItems = [
        { id: "1", name: "大模型", url: "https://spring.io/projects/spring-boot", desc: "LLM" },
        { id: "2", name: "增强检索", url: "https://umijs.org/", desc: "RAG" },
        { id: "3", name: "智能体", url: "https://umijs.org/", desc: "Agent" },
        { id: "4", name: "编程语言", url: "https://umijs.org/", desc: "Python" },
        { id: "5", name: "后端框架", url: "https://umijs.org/", desc: "Flask" },
        { id: "6", name: "Agent组件", url: "https://umijs.org/", desc: "LangChain、LangGraph" },
        { id: "7", name: "向量数据库", url: "https://umijs.org/", desc: "Qdrant" },
        { id: "8", name: "图数据库", url: "https://umijs.org/", desc: "Neo4j" },
        { id: "9", name: "关系型数据库", url: "https://umijs.org/", desc: "PostgreSQL" },
        { id: "10", name: "信息配置", url: "https://umijs.org/", desc: "Yaml" },
        { id: "11", name: "ORM框架", url: "https://umijs.org/", desc: "SQLAlchemy" },
    ];

    const systemLabelItems = [
        { id: "1", name: "LLM", color: "warning" },
        { id: "2", name: "Agent", color: "success" },
        { id: "3", name: "RAG", color: "warning" },
        { id: "4", name: "ReAct", color: "success" },
        { id: "5", name: "智能体", color: "default" },
        { id: "6", name: "多模态", color: "warning" },
        { id: "7", name: "Transformer", color: "warning" },
        { id: "8", name: "GPT", color: "success" },
        { id: "9", name: "Qwen", color: "processing" },
        { id: "10", name: "Python", color: "processing" },
        { id: "11", name: "LangChain", color: "error" },
        { id: "12", name: "LangGraph", color: "warning" },
        { id: "13", name: "Pytorch", color: "default" },
        { id: "14", name: "MCP", color: "success" },
        { id: "15", name: "A2A", color: "error" },
        { id: "16", name: "语义相似度", color: "processing" },
        { id: "17", name: "Qdrant", color: "warning" },
        { id: "18", name: "知识图谱", color: "processing" },
        { id: "19", name: "Neo4j", color: "error" },
        { id: "20", name: "社区检测", color: "warning" },
        { id: "21", name: "混合检索", color: "default" },
        { id: "22", name: "KMean", color: "success" },
        { id: "23", name: "知识库", color: "warning" },
        { id: "24", name: "COT", color: "processing" },
        { id: "25", name: "RRF", color: "error" },
        { id: "26", name: "Prompt", color: "success" },
        { id: "27", name: "Distill", color: "error" },
        { id: "28", name: "Memory", color: "warning" },
        { id: "30", name: "BM25", color: "processing" },
        { id: "31", name: "ReRank", color: "error" },
        { id: "32", name: "Lora", color: "default" },
        { id: "33", name: "DeepSeek", color: "processing" },
        { id: "34", name: "GRPO", color: "error" },
        { id: "35", name: "魔塔社区", color: "success" },
        { id: "36", name: "HuggingFace", color: "default" },
        { id: "37", name: "半监督学习", color: "processing" },
        { id: "38", name: "Numpy", color: "warning" },
        { id: "39", name: "Pandas", color: "processing" },
        { id: "40", name: "强化学习", color: "success" },
    ];

    return (
        <div style={{ width: "100%", height: "100%", overflowY: "scroll" }} className={styles.infoDiv}>
            <div className={styles.introductionDiv}>
                <div className={styles.infoShowDiv}>
                    <div className={styles.briefDiv}>
                        <div className={styles.infoFontSize}><i className="ri-bookmark-3-fill" style={iconTitleStyle}></i>系统简介</div>
                        <Divider className={styles.dividerDiv} />
                    </div>
                    <div className={styles.briefContentDiv}>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{config.name}是AI技术集成的智能技术系统，后端用Python编写实现，前端用React开发交互页面，涉及到的大模型技术有LLM对话、RAG和Agent等，大模型应用框架组件有LangChain和LangGraph，支持RAG模式、Agent模式、Prompt工程、工具调用、记忆管理等功能，引入了对话式交互、知识检索增强生成（RAG）、多智能体协同（Agent）等AI能力。
                    </div>
                    <div className={styles.briefContentDiv}>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;TaiXu-Admin 采用 前后端分离 + 模块化分层 的架构风格，确保系统高内聚、低耦合，便于功能迭代。
                    </div>
                    <div className={styles.briefContentDiv}>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;AI应用集成 LangChain 与 LangGraph，分别用于构建模块化的大模型应用流水线和复杂状态驱动的多智能体协作流程。
                    </div>
                    <div className={styles.briefContentDiv}>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;数据基础设施包括向量数据库（选用高性能、云原生的 Qdrant，用于存储和检索文本嵌入（Embeddings），支撑 RAG 场景下的语义相似性搜索）、图数据库（引入 Neo4j，用于建模实体间复杂关系（如用户-角色-资源权限拓扑、知识图谱等），赋能关系推理与路径分析）和关系型数据库（采用稳定可靠的 PostgreSQL 存储结构化业务数据（如用户信息、操作日志、配置项等））。
                    </div>
                    <div className={styles.agentTableInfoDIv} style={{ paddingTop: 10 }}>
                        <Table pagination={false} bordered={true} tableLayout={"fixed"} columns={ragColumns} dataSource={ragItems} />
                    </div>
                    <div className={styles.agentTableInfoDIv}>
                        <Table pagination={false} bordered={true} tableLayout={"fixed"} columns={agentColumns} dataSource={agentItems} />
                    </div>
                </div>
                <div className={styles.projectDiv}>
                    <div className={styles.briefDiv}>
                        <div className={styles.infoFontSize}><i className="ri-layout-masonry-fill" style={iconTitleStyle}></i>项目模块</div>
                        <Divider className={styles.dividerDiv} />
                    </div>
                    <div className={styles.projectInfoDIv} style={{ display: "flex", flexDirection: "column" }}>
                        <Table pagination={false} bordered={true} tableLayout={"fixed"} columns={describeColumns} dataSource={descriptionList} />
                    </div>
                </div>
                <div className={styles.logDiv}>
                    <div className={styles.logLeftDiv}>
                        <div className={styles.logFontDiv}>
                            <div className={styles.infoFontSize}><i className="ri-stack-fill" style={iconTitleStyle}></i>系统升级日志</div>
                            <Divider className={styles.dividerDiv} />
                        </div>
                        <div className={styles.logContenDiv}>
                            <Timeline>
                                {
                                    timeLineItems.map(item =>
                                        <TimeLineItem dot={<i className={item.icon} style={iconStyle}></i>} color={item.color}>{item.desc}</TimeLineItem>
                                    )
                                }
                            </Timeline>
                        </div>
                    </div>
                    <div className={styles.logRightDiv}>
                        <div className={styles.versionDiv}>
                            <div className={styles.webInfoDiv}>
                                <div className={styles.infoFontSize}>
                                    <i className="ri-map-2-fill" style={iconTitleStyle}></i>版本信息
                                </div>
                                <Divider className={styles.dividerDiv} />
                            </div>
                            <div className={styles.webDetailDiv}>
                                <Descriptions title="" layout="horizontal" bordered column={1} className={styles.technicalDescription} style={{ flex: 1}}>
                                    <DescriptionsItem label="当前版本">TaiXu-Admin V1.0.0</DescriptionsItem>
                                    <DescriptionsItem label="开发成员">xuesjie</DescriptionsItem>
                                    <DescriptionsItem label="代码仓库">
                                        <span><a target = "_blank" href={"https://gitee.com/xuesjie/TaiXu-Admin"}><Tag color="#f50">Web前端</Tag></a></span>
                                        <span style={{ marginLeft: "0px" }}>
                                            <a target = "_blank" href={"https://gitee.com/xuesjie/TaiXu-Admin"}><Tag color="#108ee9">Python后端</Tag></a>
                                        </span>
                                    </DescriptionsItem>
                                </Descriptions>
                            </div>
                        </div>
                        <div className={styles.labelDiv}>
                            <div className={styles.linkFontDiv}>
                                <div className={styles.infoFontSize}>
                                    <i className="ri-centos-fill" style={iconTitleStyle}></i>系统标签
                                </div>
                                <Divider className={styles.dividerDiv} />
                            </div>
                            <div className={styles.labelShowDiv}>
                                {
                                    systemLabelItems.map(item =>
                                        <Tag color={item.color} style={{ margin: "0px 5px 5px 0px" }}>{item.name}</Tag>)
                                }
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div className={styles.structureDiv}>
                <div className={styles.serviceDiv}>
                    <div className={styles.serviceInfoDiv}>
                        <div className={styles.infoFontSize}><i className="ri-code-box-fill" style={iconTitleStyle}></i>后端技术</div>
                        <Divider className={styles.dividerDiv} />
                    </div>
                    <div className={styles.serviceDetailDiv}>
                        <Descriptions title="" layout="horizontal" bordered column={1} className={styles.technicalDescription} style={{ flex: 1}}>
                            {
                                serviceItems.map(item =>
                                    <DescriptionsItem label={item.name}>
                                        <a target = "_blank" href={item.url}>{item.desc}</a>
                                    </DescriptionsItem>
                                )
                            }
                        </Descriptions>
                    </div>
                </div>
                <div className={styles.webDiv}>
                    <div className={styles.webInfoDiv}>
                        <div className={styles.infoFontSize}><i className="ri-html5-fill" style={iconTitleStyle}></i>前端技术</div>
                        <Divider className={styles.dividerDiv} />
                    </div>
                    <div className={styles.webDetailDiv}>
                        <Descriptions title="" layout="horizontal" bordered column={1} className={styles.technicalDescription} style={{ flex: 1}}>
                            {
                                webItems.map(item =>
                                    <DescriptionsItem label={item.name}>
                                        <a target = "_blank" href={item.url}>{item.desc}</a>
                                    </DescriptionsItem>
                                )
                            }
                        </Descriptions>
                    </div>
                </div>
                <div className={styles.linkDiv}>
                    <div className={styles.linkFontDiv}>
                        <div className={styles.infoFontSize}>
                            <i className="ri-base-station-fill" style={iconTitleStyle}></i>友情链接
                        </div>
                    </div>
                    <Carousel dotPosition={"bottom"} className={styles.carousel} autoplay={true} adaptiveHeight={true}>
                        {
                            linkUrlItems.map(item =>
                                <div id={"linkUrl" + item.id} className={item.className}>
                                    <h3 className={styles.carsouselFont}>
                                        <a href={item.url} target="_blank">{item.desc}</a>
                                    </h3>
                                </div>)
                        }
                    </Carousel>
                </div>
            </div>
        </div>
    );
};

export default DetailPage;
